<template>
  <div class="bf2">
    <ul class="dan">
      <li class="sp">视频</li>
      <li class="tl">讨论<span>770</span></li>
      <li class="dm">
        <input type="text" placeholder="点我发弹幕" /><span>弹</span>
      </li>
    </ul>
    <!-- 追加 -->
    <div class="zaizui">
      <div class="zaizui1" v-for="comment in comments" :key="comment.id">
        <h4>{{comment.name}}</h4>
        <p><span>独播</span><i>🎈3559</i><b>短片·简介&nbsp;></b></p>
      </div>
      <p class="zaizui2">+在追</p>
    </div>
    <!-- 下方的喜欢 -->
    <ul class="xihuan">
      <li>
        <span class="iconfont public-dianzan"></span>
        <p>2.1万</p>
      </li>
      <li>
        <span class="iconfont public-pinglun"></span>
        <p>17</p>
      </li>
      <li>
        <span class="iconfont public-shoucang"></span>
        <p>5167</p>
      </li>
      <li>
        <span class="iconfont home-download"></span>
        <p>下载</p>
      </li>
      <li>
        <van-cell
          span
          class="iconfont public-zhuanfa"
          @click="showShare = true"
        />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
        <p style="margin-left: -0.2rem; margin-top: 0rem">53</p>
      </li>
    </ul>

    <!-- 下方确认按钮 -->
    <!-- <input type="button" value="半年卡64元 原价108再赢时长" class="input" /> -->
    <van-cell is-link @click="showPopup"
      ><input type="button" value="半年卡64元 原价108再赢时长" class="input" />
    </van-cell>
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '70%' }"
    >
      <p class="nian">年卡5折 赢100倍会员时长</p>
      <img src="../../../assets/img/yl-img/bf/tanchu.jpg" class="img1" />
      <img src="../../../assets/img/yl-img/bf/tanchu1.jpg" class="img2" />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Bofang2",
  props: ["comments"],
  data() {
    return {
      active: 2,
      show: false,
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },

  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
@import url("../../../assets/iconfont/iconfont.css");
p {
  margin-left: 0;
}
.dan {
  display: flex;
  width: 3.84rem;
  height: 0.4rem;
  margin-left: 0.15rem;
  white-space: nowrap;
}
.dan li {
  line-height: 0.4rem;
}
.dan li input {
  width: 1.1rem;
  height: 0.32rem;
  border-radius: 0.4rem;
  background-color: #f4f4f4;
  border: 0;
  font-size: 0.1rem;
}
.tl {
  margin-left: 0.28rem;
  color: #767676;
}
.tl span {
  color: #e779c3;
  font-size: 0.1rem;
}
.dm {
  margin-left: 1.44rem;
  position: relative;
}
.dm span {
  position: absolute;
  top: 0.02rem;
  right: 0.01rem;
  display: inline-block;
  width: 0.35rem;
  height: 0.37rem;
  background-color: #feffff;
  /* text-align: center; */
  border-radius: 0 0.4rem 0.4rem 0;
}

.van-cell {
  margin-top: -0.1rem;
  /* border-radius: 0.1rem; */
}
.van-icon-arrow {
  display: none;
  /* border-radius:0.1rem ; */
}
.nian {
  width: 100%;
  height: 0.47rem;
  margin-left: 0.17rem;
  font-size: 0.18rem;
  margin-top: 0.15rem;
  font-weight: bold;
}
.img1 {
  width: 4.14rem;
  height: 4.8rem;
  display: block;
}
.img2 {
  height: 2.41rem;
  display: block;
}
/* 在追 */
.zaizui {
  margin-left: 0.15rem;
  width: 3.85rem;
  height: 0.58rem;
}
.zaizui1 {
  float: left;
}
.zaizui1 p span {
  display: inline-block;
  width: 0.33rem;
  height: 0.2rem;
  background-color: #fd028a;
  color: white;
  font-size: 0.11rem;
  text-align: center;
  line-height: 0.2rem;
}
.zaizui1 p i {
  margin: 0 0.13rem;
  font-size: 0.1rem;
  color: #939393;
}
.zaizui1 p b {
  font-weight: normal;
  font-size: 0.11rem;
  color: #939393;
}
.zaizui2 {
  float: right;
  width: 0.64rem;
  height: 0.33rem;
  background-color: #222122;
  color: #66faff;
  text-align: center;
  line-height: 0.33rem;
  border-radius: 0.4rem;
  margin-top: 0.1rem;
}

/* 下方的喜欢 */

.xihuan {
  display: flex;
}

.xihuan li {
  text-align: center;
  width: 20%;
}
.iconfont {
  font-size: 0.25rem;
}
.xihuan li p {
  margin: 0.07rem 0;
  font-size: 0.1rem;
  color: #969696;
}
.input {
  /* margin-left: 0.15rem; */
  width: 3.8rem;
  height: 0.43rem;
  background-color: #fed98b;
  color: #693900;
  text-align: center;
  font-size: 0.12rem;
  border-radius: 0.1rem;
  border: 0;
}
</style>